<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单与v-model指令</title>
</head>
<body>
    <fieldset>
        <legend>
            表单与v-model指令
        </legend>
        <p>
            表单类控件承载了一个网页数据的录入与交互
            表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。 Vue提供了v-model指令，用于在表单类元素上双向绑定数据
        </p>
        <fieldset>
            <legend>在输入框上输入的内容实时映射到绑定的数据上</legend>
            <div id="app1">
                <input type="text" placeholder="请输入..." v-model="message">
                <!--在输入框输入的问时，{{message}}也会实时将内容渲染在视图中-->
               <p>输入的内容是：{{message}}</p>
                <hr/>
                <textarea placeholder="请输入..." v-model="text"></textarea>
                <p>输入的内容是：{{text}}</p>
            </div>
        </fieldset>
        <fieldset>
            <legend>绑定一组单选按钮</legend>
            <div id="app2">
                <!--数据picked的值与单选按钮的value值一致时，就会选中该项-->
                <input type="radio" v-model="picked" value="html" id="html"/>
                <label for="html">html</label>
                <br/>
                <input type="radio" v-model="picked" value="js" id="js"/>
                <label for="js">js</label>
                <br/>
                <input type="radio" v-model="picked" value="css" id="css"/>
                <label for="css">css</label>
                <br/>
                <p>当前选中的是：{{picked}}</p>
            </div>
        </fieldset>
        <fieldset>
            <legend>绑定复选框</legend>
            <div id="app3">
                <!--复选框单独使用时，用v-model来绑定一个布尔值-->
                <input type="checkbox" v-model="checked" id="checkbox"/>
                <!--在勾选时，数据checked的值变为了true,label中渲染的内容也会更新。-->
                <label for="checkbox">选择状态：{{checked}}</label>
                <br/>
            </div>
            <hr/>
            <div id="app4">
                <!--复选框组合使用时，也是v-model与value一起 ，多个勾选框都绑定到同一个数组类型的数据， value的值在数组当中，就会选中这一项。
                这一过程也是双向的，在勾选时，value 的值也会自动push到这个数组中-->
                <input type="checkbox" v-model="checked" value="html1" id="html1"/>
                <label for="html1">html1</label>
                <br/>
                <input type="checkbox" v-model="checked" value="js1" id="js1"/>
                <label for="js1">js1</label>
                <br/>
                <input type="checkbox" v-model="checked" value="css1" id="css1"/>
                <label for="css1">css1</label>
                <br/>
                <p>当前选中的是：{{checked}}</p>
            </div>
        </fieldset>
        <fieldset>
            <legend>绑定下拉框</legend>
            <div id="app5">
                <!--如果含有value属性，v-model就会优先匹配value的值：如果没有，就会直接匹配option的text，
                比如选中第二项时，selected 的值是js，而不是JavaScript。-->
                <select v-model="selected">
                    <option>html</option>
                    <option value="js">javascript</option>
                    <option>css</option>
                </select>
                <p>选择的项是：{{selected}}</p>
            </div>
            <hr/>
            <!--多选下拉框-->
            <div id="app6">
                <!--给select添加属性multiple就可以多选了， 此时v-model绑定的是一个数组-->
                <select v-model="selected" multiple="multiple">
                    <option>html</option>
                    <option value="js">javascript</option>
                    <option>css</option>
                </select>
                <p>选择的项是：{{selected}}</p>
            </div>
            <hr/>
            <div id="app7">
                <!--在开发中，option经常用v-for动态输出，value和text也是用v-bind 来动态输出的-->
                <select v-model="selected">
                    <option v-for="option in options" :value="option.value">{{option.text}}</option>
                </select>
                <p>选择的项是：{{selected}}</p>
            </div>
        </fieldset>
        <fieldset>
            <legend>绑定值</legend>
            <div id="app8">
                <input type="radio" v-model="picked" :value="value"/>
                <label>单选按钮</label>
                <p>{{picked}}</p>
                <p>{{value}}</p>
            </div>
            <div id="app9">
                <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2"/>
                <label>复选框</label>
                <p>{{toggle}}</p>
                <p>{{value1}}</p>
                <p>{{value2}}</p>
            </div>
        </fieldset>
        <fieldset>
            <legend>v-model修饰符用于控制数据同步的时机。</legend>
            <div id="app10">
                <!--在输入框中，v-model 默认是在input事件中同步输入框的数据（除了提示中介绍的中文输入法情况外），
                使用修饰符.lazy会转变为在change事件中同步-->
                <input type="text" v-model.lazy="message"/>
                <p>{{message}}</p><!--message并不是实时改变的，而是在失焦或按回车时才更新。-->
            </div>
            <div id="app11">
                <!--使用修饰符.number可以将输入转换为Number类型，否则虽然你输入的是数字，但它的类型其实是 String-->
                <input type="text" v-model.number="message"/>
                <p>{{ typeof message}}</p>
            </div>
            <div id="app12">
                <!--修饰符.trim可以自动过滤输入的首尾空格-->
                <input type="text" v-model.trim="message"/>
                <p>{{message}}</p>
            </div>
        </fieldset>
    </fieldset>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app1 = new Vue({
        el:"#app1",
        data:{
            message:"",
            text:""
        }
    });

    var app2 = new Vue({
        el:"#app2",
        data:{
           picked:"js"
        }
    });

    var app3 = new Vue({
        el:"#app3",
        data:{
            checked:false
        }
    });

    var app4 = new Vue({
        el:"#app4",
        data:{
            checked:['html1','css1']
        }
    });

    var app5 = new Vue({
        el:"#app5",
        data:{
            selected:'html'
        }
    });

    var app6 = new Vue({
        el:"#app6",
        data:{
            selected:['html','js']
        }
    });

    var app7 = new Vue({
        el:"#app7",
        data:{
            selected:'html',
            options:[
                {
                    text:'html',
                    value:'html'
                },
                {
                    text:'javascript',
                    value:'js'
                },
                {
                    text:'css',
                    value:'css'
                }
            ]
        }
    });
    var app8 = new Vue({
        el:"#app8",
        data:{
            picked:false,
            value:123
        }
    });
    var app9 = new Vue({
        el:"#app9",
        data:{
            toggle:false,
            value1:123,
            value2:456
        }
    });

    var app10 = new Vue({
        el:"#app10",
        data:{
           message:''
        }
    });

    var app11 = new Vue({
        el:"#app11",
        data:{
            message:''
        }
    });

    var app12 = new Vue({
        el:"#app12",
        data:{
            message:''
        }
    });
</script>